<script setup name="singer">
import { onMounted, reactive, toRefs, ref, watch } from "vue"
import { useRoute } from 'vue-router'
import { usePlayStore } from '@/stores'
import { artistDetail, artistFollow, artists, artistDesc } from '@/services/singer'
import { formartNum, formatSearchSongs } from '@/utils/util'
import { Play } from '@icon-park/vue-next'

import IconPark from '@/components/common/IconPark.vue'
import Header from "@/components/common/Header.vue"
import SingerMain from '@/components/Singer/SingerMain.vue'
import SingerAlbum from "@/components/Singer/SingerAlbum.vue"
import SingerMV from "@/components/Singer/SingerMV.vue"
import MusicCell from "@/components/common/MusicCell.vue"

const active = ref('主页')
const route = useRoute()
const playStore = usePlayStore()
const showAvatar = ref(false)

const singer_info = reactive({
  id: '',
  loading: false,
  artist_info: {},
  identify_info: {},
  secondary_info: [],
  user_info: {},
  videoCount: 0,
  follow_info: {},
  hotSongs: [],
  introduction: [],
  eventCount: 0
})

// 获取歌手详情
const getSingerDetail = async id => {
  singer_info.loading = true
  const { data } = await artistDetail(id)
  Object.assign(singer_info, {
    artist_info: data.artist,
    identify_info: data.identify,
    secondary_info: data.secondaryExpertIdentiy,
    user_info: data.user,
    videoCount: data.videoCount || 0,
    albumCount: data.artist.albumSize,
    musicCount: data.artist.musicSize,
    eventCount: data.eventCount || 0
  })
  singer_info.loading = false
}

// 获取歌手粉丝数量
const getArtistFollowCount = async id => {
  singer_info.loading = true
  const { data } = await artistFollow(id)
  singer_info.follow_info = data
  singer_info.loading = false
}

// 获取歌手单曲
const getArtists = async id => {
  singer_info.loading = true
  const { hotSongs } = await artists(id)
  singer_info.hotSongs = formatSearchSongs(hotSongs)
  singer_info.loading = false
}

// 获取歌手描述
const getartistDesc = async id => {
  singer_info.loading = true
  const res = await artistDesc(id)
  singer_info.introduction = res.introduction
  singer_info.loading = false
}

const { artist_info, identify_info, user_info, follow_info, introduction, hotSongs, id } = toRefs(singer_info)

const _initData = id => {
  Promise.all([
    getSingerDetail(id),
    getArtistFollowCount(id),
    getArtists(id),
    getartistDesc(id)
  ])
}

const playAll = () => {
  playStore.selectPlay(hotSongs.value)
  playStore.setPlayStatus(false)
  playStore.changeMusicDialog(true)
}

const handleScroll = event => event.scrollTop > 290 ? showAvatar.value = true : showAvatar.value = false

onMounted(() => {
  singer_info.id = route.query.id
  _initData(route.query.id)
})

watch(
  () => route.query.id,
  newVal => {
    if (route.fullPath.includes('/singer/detail?id')) _initData(newVal)
  }
)
</script>

<template>
  <div class="singer">
    <Header defaultStr="歌手" :title="artist_info.name" :scrollTopNum="360" />
    <div class="singer-bg" :style="{ backgroundImage: `url(${artist_info.cover})` }"></div>
    <van-row gutter="20" justify="center" class="singer-info">
      <van-col span="20" class="singer-info-col">
        <van-image class="singer-info-col-cover" :style="{ opacity: showAvatar ? 0 : 1 }" width="70" height="70"
          :src="artist_info.avatar" round />
      </van-col>
      <van-col span="20" class="singer-info-col">
        <span class="singer-info-col-name">{{ artist_info.name }}</span>
        <van-image v-if="identify_info?.imageUrl" class="singer-info-vip" width="16" height="16"
          :src="identify_info?.imageUrl" round />
      </van-col>
      <van-col span="20" v-if="artist_info.alias" class="singer-info-col">
        <span class="singer-info-col-alias">{{ artist_info.alias[0] }}</span>
      </van-col>
      <van-col span="20" class="singer-info-col">
        <span class="singer-info-col-followCnt">{{ follow_info?.followCnt }}</span> 关注
        &nbsp;&nbsp;
        <span class="singer-info-col-fansCnt">{{ formartNum(follow_info?.fansCnt) }}</span> 粉丝
      </van-col>
      <van-col span="20" class="singer-info-col">
        <span class="singer-info-col-Desc">{{ identify_info?.imageDesc }}</span>
      </van-col>
      <van-col span="20" class="singer-info-col">
        <div class="singer-info-col-actions">
          <van-button icon="plus" size="small" round color="#ff3534"
            class="singer-info-col-actions-follow">关注</van-button>
          <van-button size="small" round plain hairline class="singer-info-col-actions-more">
            <van-icon name="arrow-down" />
          </van-button>
        </div>
      </van-col>
    </van-row>

    <van-tabs v-model:active="active" swipeable sticky offset-top="40px" line-width="20px" color="red"
      background="var(--reversal-singer-main)" @scroll="handleScroll">
      <van-tab title="主页">
        <SingerMain :user="user_info" :artist="artist_info" :introduction="introduction" />
      </van-tab>
      <van-tab>
        <template #title>
          <div class="title">
            歌曲
            <span v-if="singer_info.musicCount" class="title-count">{{ singer_info.musicCount }}</span>
          </div>
        </template>
        <van-cell class="singer-song">
          <template #title>
            <div class="singer-song-playAll">
              <IconPark :icon="Play" theme="filled" fill="#fe3a39" :size="6" :strokeWidth="6" @click="playAll" />
              <h3>播放热门 {{ hotSongs.length }}</h3>
            </div>
          </template>
        </van-cell>
        <MusicCell :list="hotSongs" />
        <van-cell>
          <template #title>
            <div class="checkAll">{{ `查看全部首 ${artist_info.musicSize} 歌曲 >` }}</div>
          </template>
        </van-cell>
      </van-tab>
      <van-tab>
        <template #title>
          <div class="title">
            专辑
            <span v-if="singer_info.albumCount" class="title-count">{{ singer_info.albumCount }}</span>
          </div>
        </template>
        <SingerAlbum :id="id" />
      </van-tab>
      <van-tab>
        <template #title>
          <div class="title">
            视频
            <span v-if="singer_info.videoCount" class="title-count">{{ singer_info.videoCount }}</span>
          </div>
        </template>
        <SingerMV :id="id" />
      </van-tab>
      <van-tab>
        <template #title>
          <div class="title">
            动态
            <span v-if="singer_info.eventCount" class="title-count">{{ singer_info.eventCount }}</span>
          </div>
        </template>
        <van-empty description="暂无动态" />
      </van-tab>
      <van-tab title="播客">
        <van-empty description="暂无播客" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<style scoped lang="scss">
.singer {
  background: var(--reversal-singer-main);
  padding-bottom: 48px;

  .title {
    position: relative;

    &-count {
      font-size: 10px;
      position: absolute;
      top: -2px;
      font-weight: bold;
      transform: scale(.8);
    }
  }

  &-bg {
    height: 300px;
    background-position: 50% 40%;
    background-size: 130%;
  }

  &-info {
    margin: -20px 16px 10px 16px;
    border-radius: 16px;
    background: linear-gradient(to bottom, var(--reversal-singer-background1), var(--reversal-singer-background2));

    &-col {
      text-align: center;

      &-cover {
        margin-top: -34px;
        transition: all .3s;
      }

      &-name {
        font-size: 20px;
        font-weight: bold;
        margin-right: 6px;
        color: var(--reversal-text);
      }

      &-alias,
      &-Desc {
        font-size: 10px;
      }

      &-followCnt,
      &-fansCnt {
        font-size: 12px;
        font-weight: bold;
      }

      &-actions {
        margin: 10px 0;

        &-follow {
          width: 70px;
          margin-right: 6px;
        }

        &-more {
          background-color: transparent;
          width: 32px;

          .van-icon {
            color: var(--reversal-text);
          }
        }
      }
    }
  }

  &-song {
    background: var(--reversal-singer-main);
    opacity: .9;
    color: var(--reversal-text);

    &-playAll {
      display: flex;
      align-items: center;
      line-height: 1;

      h3 {
        margin-left: 10px;
        font-weight: bold;
      }
    }

    &::after {
      content: none;
    }
  }

  .checkAll {
    text-align: center;
    font-size: 12px;
    color: var(--van-cell-label-color);
  }

  :deep(.van-tab--active) {
    color: var(--reversal-text);
  }

  :deep(.van-tabs__line) {
    bottom: 6vw;
  }

  :deep(.header) {
    background: var(--reversal-singer-main);
  }

  :deep(.van-cell) {
    background: transparent;
  }
}
</style>